<template>
  <div>
    <el-row  class="header" style="margin-bottom:20px;">
      <el-col :span="6" style="margin-bottom:20px;">
        <span style="width:28%;text-align:right;float:left;line-height:36px;">类别：</span>
        <el-select  v-model="Shops.value" style="width:55%;" placeholder="选择类别" @change="changeFn">
          <el-option v-for="item in Shops.options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6" v-show="Shops.value==1" style="margin-bottom:20px;">
        <span style="width:28%;text-align:right;float:left;line-height:36px;">状态：</span>
        <el-select clearable v-model="param.cla.value" style="width:55%;" placeholder="选择状态" @change="changeFn">
          <el-option v-for="item in param.cla.opts" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <!-- 年货节类型筛选 -->
      <el-col :span="5" v-show="Shops.value==2">
        <span style="width:28%;text-align:right;float:left;line-height:36px;">类别：</span>
        <el-select clearable v-model="yearType.value" style="width:55%;" placeholder="选择类别" @change="changeFn">
          <el-option v-for="item in yearType.options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <!-- 年货状态筛选 -->
      <el-col :span="5" v-show="Shops.value==2">
        <span style="width:28%;text-align:right;float:left;line-height:36px;">状态：</span>
        <el-select clearable v-model="yearState.value" style="width:55%;" placeholder="选择状态" @change="changeFn">
          <el-option v-for="item in yearState.options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6" v-show="Shops.value==1" style="margin-bottom:20px;">
       <span style="width:28%;text-align:right;float:left;line-height:36px;">类型：</span>
        <el-select clearable v-model="param.status" style="width:55%;" placeholder="类型" @change="changeFn">
          <el-option v-for="item in param.status.opts" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6" v-show="Shops.value==1" style="margin-bottom:20px;">
        <span style="width:28%;text-align:right;float:left;line-height:36px;">日期：</span>
        <el-date-picker v-model="param.time" style="width:55%;" type="daterange" placeholder="选择日期范围" @change="changeFn">
        </el-date-picker>
      </el-col>
      <el-col :span="6" v-show="Shops.value==1" style="margin-bottom:20px;">
        <span style="width:28%;text-align:right;float:left;line-height:36px;">商品名称：</span>
        <el-input v-model="param.name" placeholder="商品名称" style="width:55%;"></el-input>
      </el-col>
      <el-col :span="4" >
        <el-button type="primary" @click="getTableDate(1)" style="width:25%;">搜索</el-button>
      </el-col>
      <el-col :span="4" v-show="Shops.value==2" style="margin-left:-80px;">
        <span>剩余可兑换金额：{{this.keduihuan}}</span>
      </el-col>
    </el-row>
        <el-table
          :data="capital"
          border
          v-show="Shops.value==1"
          style="width: 100%">
          <el-table-column v-for="(item,index) in capitalTit" :key="index"
            :prop="item.prop"
            :label="item.label"
            :width="item.width">
          </el-table-column>
        </el-table>
        <el-table
          :data="yearData1"
          border
          v-show="Shops.value==2"
          style="width: 100%">
          <el-table-column v-for="(item,index) in yearData" :key="index"
            :prop="item.props"
            :label="item.label"
            align="center"
            >
          </el-table-column>
          </el-table>
        <div style="margin: 30px 0;">
          <el-pagination
          @current-change="handleCurrentChange"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="total">
          </el-pagination>
        </div>
  </div>
</template>
<script>
import { dateFormat } from 'vux'
export default {
  data() {
    return {
      keduihuan:'',
      id:this.$route.params.id,
      capitalTit:[{
          prop:'cName',
          label:'商品名称',
          width: '180'
        },{
          prop:'cBz',
          label:'备注',
          width: '180'
        },{
          prop:'fIntegral',
          label:'所需积分',
          width: '180'
        },{
          prop:'fProNum',
          label:'兑换数量',
          width: '180'
        },{
          prop:'fIntegrals',
          label:'兑换积分',
          width: '180'
        },{
          prop:'tPostTime',
          label:'兑换时间',
          width: '180'
        },{
          prop:'fStatus',
          label:'兑换状态',
          width: '180'
        },{
          prop:'cAddress',
          label:'收货地址',
          width: '180'
        },{
          prop:'cTrackingNum',
          label:'快递单号',
          width: '180'
        }
      ],
      Shops:{
        value:1,
        options:[
          {
            value:1,
            label:'默认'
          },{
            value:2,
            label:'年货节'
          }
        ]
      },
      yearState:{
        value:'',
        options:[
          {
            value:1,
            label:'已发货'
          },
          {
            value:0,
            label:'未发货'
          }
        ]
      },
      yearData1:[],
      yearData:[
        {
          props:'fuid',
          label:'用户id',
        },
        {
          props:'clpmc',
          label:'礼品名称'
        },
        {
          props:'fqx',
          label:'期限'
        },
        {
          props:'flpje',
          label:'档位'
        },
        {
          props:'tlqsj',
          label:'领取时间'
        },{
          props:'flx',
          label:'状态'
        },
        {
           props:'fzt',
          label:'类型'
        },
        {
           props:'cddh',
          label:'订单号'
        }
      ],
      yearType:{
        value:'',
        options:[
          {
            value:11,
            label:'累计投资奖品'
          },
          {
            value:12,
            label:'限时抢购奖品'
          },
          {
            value:13,
            label:'限时爆款奖品'
          },
        ]
      },
      capital:[],
      param: {
        name: '',
        time: '',
        status: {
          value: '',
          opts:[{
            label: '原态产品',
            value: 19
          },{
            label: '数码产品',
            value: 2
          },{
            label: '家用电器',
            value: 11
          },{
            label: '日用百货',
            value: 12
          },{
            label: '分期计划',
            value: 17
          },{
            label: '财智专区',
            value: 18
          }]
        },
        cla: {
          value: '',
          opts:[{
            label: '未审核',
            value: 0
          },{
            label: '未发货',
            value: 1
          },{
            label: '已发货',
            value: 2
          },{
            label: '已取消',
            value: 4
          }]
        },
      },
      total: 0,
      pageSize: 20,
    }
  },
  methods: {
    handleCurrentChange(val) {
       this.getTableDate(val)
    },
    changeFn(){
       this.getTableDate(1)
    },
    getTableDate (page) {
      if(this.Shops.value===1){
        this.$get(this,{api:'member/loadProductsExchange.do',data: {
          fUserID:this.id,
          cla: this.param.cla.value,
          status: this.param.status.value,
          st: this.param.time && dateFormat(this.param.time[0], 'YYYY-MM-DD'),
          et: this.param.time && dateFormat(this.param.time[1], 'YYYY-MM-DD'),
          name: this.param.name,
          pageSize: this.pageSize,
          page
        }
        }).then(({data})=>{
          if (data.state === 0) {
            if (page == 1) {
              this.total = data.content[0];
            }
            //兑换状态（3:未支付,0:待审核,1:待发货,2:已发货，4已取消）
            data.content[1].forEach(function(obj) {
              if (obj.fStatus == 0)  obj.fStatus="待审核"
              if (obj.fStatus == 1)  obj.fStatus="待发货"
              if (obj.fStatus == 2)  obj.fStatus="已发货"
              if (obj.fStatus == 3)  obj.fStatus="未支付"
              if (obj.fStatus == 4)  obj.fStatus="已取消"
            }, this);
            this.capital = data.content[1];
          } else {
            this.$toast({
              message: data.message
            })
          }
        })
      }else{
        this.$get(this,{
          api:'/member/loadYearGoods.do',
          data:{
            fuid:this.id,
            fzt:this.yearState.value,
            ddlflx:this.yearType.value,
            page:page,
            pageSize: this.pageSize
          }
        }).then((data)=>{
          this.yearData1 = data.data.content.data
          this.keduihuan = data.data.content.syjestr
        })
      }
      
    }
  },
  mounted () {
    this.getTableDate(1);
  }
}
</script>
<style lang="scss" module>
.header {
  font-size: 14px;
  padding-bottom: 20px;
}
</style>


